<template>
<!-- 正在热映 -->
<div>
  <van-list v-model="loading" :finished="finished" finished-text="我是有底的!" @load="onLoad" :immediate-check="false">
    <van-cell v-for="data in hotList" :key="data.filmId">
      <home-item :data="data">
        <div>购票</div>
      </home-item>
    </van-cell>
  </van-list>
  <div style="height: 5rem;"></div>
</div>
</template>

<script>
import http from '@/util/http'
import HomeItem from '@/components/homes/HomeItem'
import { mapState } from 'vuex'
export default {
  components: {
    HomeItem
  },
  data () {
    return {
      hotList:[],
      loading: false,
      finished: false,
      current: 1,
      total: 0
    }
  },
  computed:{
    ...mapState(['cityName','cityId'])
  },
  mounted () {
    if(this.hotList.length === 0){
      http({
        url: `/gateway?cityId=${this.cityId}&pageNum=1&pageSize=10&type=1&k=3515017`,
        headers: {
          'X-Host': 'mall.film-ticket.film.list'
        }
      }).then(res => {
        console.log(res.data.data.films)
        console.log(this.cityName);
        this.total = res.data.data.total
        this.hotList = res.data.data.films
      })
    }
  },
  methods: {
    onLoad () {
      if (this.hotList.length === this.total && this.total !== 0) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.current++
        http({
          url: `/gateway?cityId=${this.cityId}&pageNum=${this.current}&pageSize=10&type=1&k=3515017`,
          headers: {
            'X-Host': 'mall.film-ticket.film.list'
          }
        }).then(res => {
          // console.log(res.data.data.films);
          this.hotList = [...this.hotList, ...res.data.data.films]
          console.log(this.hotList.length);
          // 每次更新完成之后，主动将loading设置成false
          this.loading = false
        })
      },500)
      
      

    }
  }
}
</script>
<style scoped>
.van-cell{
  line-height: 2.5rem;
}
.addItem{
  width: 100%;
  height: 100%;
  line-height: 7.5rem;
  text-align: center;
  color: #b7bbc1;
}
</style>
